<template>
  <div :id="elId"></div>
</template>
<script>
import Konva from "konva";
import { v4 } from "uuid";
export default {
  data() {
    return {
      elId: "",
      stage: null,
    };
  },
  props: {
    height: {
      type: Number,
      default: 0,
    },
    width: {
      type: Number,
      default: 0,
    },
    lineColor: {
      type: String,
      default: "255,255,0",
    },
    speed: {
      type: Number,
      default: 2,
    },
  },
  created() {
    this.elId = v4();
  },
  mounted() {
    this.stage = new Konva.Stage({
      container: this.elId,
      width: this.width,
      height: this.height,
    });
    // add canvas element
    let layer = new Konva.Layer();
    this.stage.add(layer);

    let radiusMax = this.height > this.width ? this.width / 2 : this.height / 2;
    let arc = new Konva.Circle({
      x: this.width / 2,
      y: this.height / 2,
      radius,
      stroke: `rgba(${this.lineColor},1)`,
      strokeWidth: 2,
    });
    layer.add(arc);

    let cover = new Konva.Rect({
      x: 0,
      y: 0,
      width: this.width,
      height: this.height,
      fill: `rgba(0,0,0,0.95)`,
      globalCompositeOperation: "destination-in",
    });
    layer.add(cover);

    let radius = 0;
    let percent = 0;
    let anim = new Konva.Animation((frame) => {
      Konva.autoDrawEnabled = false;
      radius++;
      if (radius > radiusMax) {
        radius = 0;
      }
      arc.setAttrs({ radius });
      percent += 1 / ((this.speed * 1000) / frame.timeDiff);
      if (percent >= 1) {
        percent = 0;
      }
      cover.draw();
      arc.draw();
      Konva.autoDrawEnabled = true;
    });

    anim.start();
  },
};
</script>
